<template>
  <div class="home">
    <h1>计数:{{count}}</h1>
    <h1>姓名:{{name}}</h1>
    <h1>翻倍:{{mul}}</h1>
    <button @click="jiaA(2)">++(actions)</button>
    <button @click="jianA(1)">--(actions)</button>
    <hr>
    <button @click="jiaM(3)">++(commit)</button>
    <button @click="jianM(3)">--(commit)</button>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    name: 'HomeView',
    computed: {
      //通过mapState生成计算属性，从state中获取数据,(对象方式)
      // ...mapState({testCount:'count',testName:'name' }),
      //通过mapState生成计算属性，从state中获取数据,(数组方式)
      ...mapState(['count', 'name']),
      //通过mapGetters生成计算属性，从getters中获取数据,(对象方式)
      // ...mapGetters({mul:'mul'})
      //通过mapGetters生成计算属性，从getters中获取数据,(数组方式)
      ...mapGetters(['mul'])
    },
    methods: {
      // add() {
      /*
        参数1:vuex的actions中的函数名称
        参数2:传递的参数
      */
      //   this.$store.dispatch('jiaA', 2)
      // },
      /* decr() {
        // this.count--
        this.$store.dispatch('jianA', 2)
      } */
      //通过mapActions生成方法，调actions中方法,(对象方式)
      // ...mapActions({add:'jiaA',decr:'jianA'})
      //通过mapActions生成方法，调actions中方法,(方式)数组
      ...mapActions(['jiaA', 'jianA']),

      //*************************************

      /* addM() {
        this.$store.commit('jiaM', 3)
      },
      decrM() {
        this.$store.commit('jianM', 3)
      } */
      //通过mapMutations生成方法，调mutations中方法,(对象方式)
      // ...mapMutations({addM:'jiaM',decrM:'jianM'})
      //通过mapMutations生成方法，调mutations中方法,(数组方式)
      ...mapMutations(['jiaM','jianM'])
    },
    mounted() {
      // console.log(mapActions({add:'jiaA',decr:'jianA'}))
    }
  }
</script>
